/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useState } from 'react';
import { Form, Input, Button, Upload, message, Select } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { If } from 'babel-plugin-jsx-control-statements';
import Cookies from 'js-cookie';
import RequestApi from '@/utils/request';
import EditorTip from '@/components/editor-tip';
import css from '../index.scss';

/**
 * @description 停车管理备案中新增备案中经营管理者基本信息表单
 */
export default (props) => {
	const { form } = props;
	const tips = '如：023-88886666或者11位手机号';
	const { Option } = Select;
	const propertyRight = {
		headers: {
			authorization: 'authorization-text',
		},
		beforeUpload: () => {
			return false;
		},
		onChange(info) {
			if (info.file.status === 'done') {
				message.success(`${info.file.name} file uploaded successfully`);
			} else if (info.file.status === 'error') {
				message.error(`${info.file.name} file upload failed.`);
			}
		},
	};
	const permissionRight = {
		headers: {
			authorization: 'authorization-text',
		},
		beforeUpload: () => {
			return false;
		},
		onChange(info) {
			if (info.file.status === 'done') {
				message.success(`${info.file.name} file uploaded successfully`);
			} else if (info.file.status === 'error') {
				message.error(`${info.file.name} file upload failed.`);
			}
		},
	};
	const recommendation = {
		headers: {
			authorization: 'authorization-text',
		},
		beforeUpload: () => {
			return false;
		},
		onChange(info) {
			if (info.file.status === 'done') {
				message.success(`${info.file.name} file uploaded successfully`);
			} else if (info.file.status === 'error') {
				message.error(`${info.file.name} file upload failed.`);
			}
		},
	};
	const [data, setData] = useState();
	const userId = Cookies.get('id');
	useEffect(() => {
		RequestApi.connection('get', `userExtendMsg/getUserOrg/${userId}`).then((response) => {
			setData(response.data.row);
		});
	}, []);
	console.log(data);
	return (
		<If condition={data !== undefined && data !== null}>
			<div>
				<Form.Item
					className={css.item}
					label="停车场名称"
					initialValue=""
					name="name"
					rules={[{ required: true, message: '停车场名称不能为空' }]}
				>
					<EditorTip form={form} />
				</Form.Item>

				<Form.Item className={css.item}>
					<></>
				</Form.Item>

				<Form.Item className={css.item}>
					<></>
				</Form.Item>

				<Form.Item
					label="经营管理单位"
					className={css.item}
					name="manageOrgName"
					initialValue={data.orgName}
					rules={[{ required: true, message: '经营单位不能为空' }]}
				>
					<Input disabled />
				</Form.Item>

				<Form.Item
					label="经营管理单位电话"
					className={css.item}
					name="manageOrgPhone"
					initialValue=""
					help={tips}
					rules={[{ required: true, message: '经营单位电话不能为空' }]}
				>
					<Input placeholder="请输入" />
				</Form.Item>

				<Form.Item
					label="管理单位工商营业执照"
					className={css.item_file}
					initialValue=""
					tooltip="请上传管理单位工商营业执照（复印件、盖鲜章）"
					rules={[{ required: true, message: '管理单位工商营业执照不能为空' }]}
				>
					<a href={data.filePath}>商业执照</a>
				</Form.Item>

				<Form.Item
					label="产权单位"
					className={css.item}
					initialValue=""
					name="propertyOrgName"
					rules={[{ required: true, message: '产权单位不能为空' }]}
				>
					<Input placeholder="请输入" />
				</Form.Item>

				<Form.Item
					label="产权单位电话"
					className={css.item}
					name="propertyOrgPhone"
					initialValue=""
					help={tips}
					rules={[{ required: true, message: '产权单位电话不能为空' }]}
				>
					<Input placeholder="请输入" />
				</Form.Item>

				<Form.Item
					label="停车场产权单位证明"
					className={css.item_file}
					name="propertyRight"
					tooltip="请上传证明材料（复印件、盖鲜章）！"
					rules={[{ required: true, message: '停车场产权单位证明不能为空' }]}
				>
					<Upload {...propertyRight}>
						<Button icon={<UploadOutlined />}>上传</Button>
					</Upload>
				</Form.Item>

				<Form.Item
					label="与产权单位关系"
					className={css.item}
					name="propertyOrgRelation"
					initialValue={0}
					rules={[{ required: true, message: '与产权单位关系不能为空' }]}
				>
					<Select placeholder="请选择">
						<Option value={0}>租赁</Option>
						<Option value={1}>隶属</Option>
						<Option value={2}>自营</Option>
						<Option value={3}>共有</Option>
						<Option value={4}>质押</Option>
						<Option value={5}>其他</Option>
					</Select>
				</Form.Item>

				<Form.Item
					label="使用权证明材料"
					className={css.item_file}
					name="permissionRight"
					tooltip="请上传管理单位证明：产权单位的委托书、租赁、隶属、自营、共有、抵押等使用权证明材料（复印件、盖鲜章）"
					rules={[{ required: true, message: '使用权证明材料不能为空' }]}
				>
					<Upload {...permissionRight}>
						<Button icon={<UploadOutlined />}>上传</Button>
					</Upload>
				</Form.Item>

				<Form.Item className={css.item}>
					<></>
				</Form.Item>

				<Form.Item
					label="经办人"
					className={css.item}
					initialValue=""
					name="managerName"
					rules={[{ required: true, message: '经办人不能为空' }]}
				>
					<Input placeholder="请输入" />
				</Form.Item>

				<Form.Item
					label="经办人手机"
					className={css.item}
					initialValue=""
					name="managerPhone"
					help={tips}
					rules={[{ required: true, message: '经办人电话不能为空' }]}
				>
					<Input placeholder="请输入" />
				</Form.Item>

				<Form.Item
					label="单位授权办件委托书"
					className={css.item_file}
					name="recommendation"
					tooltip="请上传经办人证明：单位授权办件委托书或介绍信（复印件、盖鲜章）"
					rules={[{ required: true, message: '单位授权办件委托书不能为空' }]}
				>
					<Upload {...recommendation}>
						<Button icon={<UploadOutlined />}>上传</Button>
					</Upload>
				</Form.Item>

				<Form.Item
					label="是否收费"
					className={css.item}
					name="isCharge"
					initialValue={1}
					rules={[{ required: true, message: '不能为空' }]}
				>
					<Select placeholder="请选择">
						<Option value={1}>是</Option>
						<Option value={0}>否</Option>
					</Select>
				</Form.Item>
			</div>
		</If>
	);
};
